<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>泛微E9单点登录演示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
            color: white;
            padding: 30px 20px;
            border-radius: 8px;
            margin-bottom: 30px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        .card {
            background: white;
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }
        .card h2 {
            color: #1e88e5;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e3f2fd;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        input[type="text"]:focus,
        input[type="password"]:focus {
            border-color: #1e88e5;
            outline: none;
            box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.2);
        }
        button {
            background: #1e88e5;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: background 0.3s;
        }
        button:hover {
            background: #1565c0;
        }
        .result {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
            display: none;
        }
        .methods {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        .method {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }
        .method h3 {
            color: #1e88e5;
            margin-bottom: 15px;
        }
        .method p {
            color: #666;
            margin-bottom: 15px;
        }
        footer {
            text-align: center;
            margin-top: 40px;
            color: #777;
            font-size: 0.9rem;
        }
        .code {
            background: #263238;
            color: #eee;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
            margin: 15px 0;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>泛微E9单点登录演示</h1>
            <p class="subtitle">实现与泛微E9系统的安全单点登录集成</p>
        </header>

        <div class="card">
            <h2>单点登录测试</h2>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="请输入用户名" value="testuser">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请输入密码" value="testpass">
            </div>
            <button id="sso-btn">单点登录到泛微E9</button>
            
            <div class="result" id="result">
                <h3>生成的重定向URL：</h3>
                <p id="redirect-url"></p>
                <div class="code" id="token-info">
                    // Token信息将显示在这里
                </div>
            </div>
        </div>

        <div class="card">
            <h2>单点登录实现方式</h2>
            <div class="methods">
                <div class="method">
                    <h3>Token验证方式</h3>
                    <p>通过生成安全Token传递给泛微系统进行验证</p>
                    <div class="code">
// 生成Token示例代码
function generateToken(username, secretKey) {
    const timestamp = Date.now();
    const sign = md5(username + timestamp + secretKey);
    return `${username}|${timestamp}|${sign}`;
}
                    </div>
                </div>
                <div class="method">
                    <h3>数字签名方式</h3>
                    <p>使用RSA等加密算法对请求参数进行签名验证</p>
                    <div class="code">
// 签名示例代码
function generateSign(params, privateKey) {
    const paramStr = sortParams(params) + privateKey;
    return sha1(paramStr);
}
                    </div>
                </div>
                <div class="method">
                    <h3>第三方认证集成</h3>
                    <p>通过OAuth、SAML等标准协议实现认证</p>
                    <div class="code">
// OAuth重定向示例
function oauthRedirect() {
    redirectTo(`https://e9-server.com/oauth?
        client_id=YOUR_CLIENT_ID&
        redirect_uri=YOUR_CALLBACK_URL`);
}
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <p>© 2023 泛微E9单点登录实现方案 - 仅供参考</p>
        </footer>
    </div>

    <script>
        document.getElementById('sso-btn').addEventListener('click', function() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            if (!username || !password) {
                alert('请输入用户名和密码');
                return;
            }
            
            // 模拟生成Token（实际应用中需要更复杂的逻辑）
            const timestamp = Date.now();
            const token = btoa(`${username}:${timestamp}:${btoa(password)}`);
            
            // 构建重定向URL（这里使用模拟URL）
            const redirectUrl = `https://e9.example.com/sso/login?token=${encodeURIComponent(token)}&redirect=/portal`;
            
            // 显示结果
            document.getElementById('redirect-url').textContent = redirectUrl;
            document.getElementById('token-info').textContent = `Token分解: ${atob(token)}`;
            document.getElementById('result').style.display = 'block';
            
            // 在实际应用中，这里会直接重定向
            // window.location.href = redirectUrl;
        });
    </script>
</body>
</html>